<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Sistema Agenda</title>
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="north" size="100" >
                <center><h1>Sistema Agenda</h1></center>
            </p:layoutUnit>
            <p:layoutUnit position="west" size="200" rendered="true" collapsible="true" resizable="true" closable="true" header="Menu">
                <h:form>
                    <p:commandLink value="Novo Contato" actionListener="#{contatosController.prepararAdicionarContato(actionEvent)}" onclick="dlgContatos.show()" />
                </h:form>
            </p:layoutUnit>

            <p:layoutUnit position="center">
                <h:form prependId="false">
                    <p:dialog widgetVar="dlgContatos"  resizable="false" header="Agenda Contatos" height="250" width="400" >

                        <p:panelGrid columns="2" >
                            <h:outputText value="Nome"/>
                            <p:inputText id="nome" value="#{contatosController.contatos.nome}" />

                            <h:outputText value="Email"/>
                            <p:inputText id="email" value="#{contatosController.contatos.email}" />

                            <h:outputText value="Telefone"/>
                            <p:inputText id="telefone" value="#{contatosController.contatos.telefone}" />

                            <h:outputText value="Celular"/>
                            <p:inputText id="celular" value="#{contatosController.contatos.celular}" />

                            <p:commandButton value="Salvar" id="salvar" actionListener="#{contatosController.adicionar(actionEvent)}"
                                             update="contatos" oncomplete="dlgContatos.hide()"/>
                        </p:panelGrid>
                    </p:dialog>

                    <p:dataTable id="contatos" value="#{contatosController.listaContatos}" var="contatos">
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Nome"/>
                            </f:facet>
                            <h:outputText value="#{contatos.nome}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="E-mail"/>
                            </f:facet>
                            <h:outputText value="#{contatos.email}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Telefone"/>
                            </f:facet>
                            <h:outputText value="#{contatos.telefone}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Celular"/>
                            </f:facet>
                            <h:outputText value="#{contatos.celular}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Excluir"/>
                            </f:facet>
                            <p:commandLink value="Excluir" action="#{contatosController.excluir()}" 
                                           onclick="if(!confirm('Deseja excluir o contato #{contatos.nome}?')) return false;" 
                                           update="contatos"/>
                        </p:column>
                    </p:dataTable>
                </h:form>
            </p:layoutUnit>
        </p:layout>
    </h:body>
</html>

